I am trying to have sentence case with Button text inside Material UI Button.
https://mui.com/components/buttons/
text inside the button - ADD FRIEND should become to sentence case as Add friend.
I have tried to override the theme. But it does not target the element this way. Please suggest if this is possible to do.
createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
'&::first-letter': {
textTransform: 'uppercase',
},
},
}
}
}
});
They way I do it, is write the following code in makeStyles of the page/component:
parentOfButton: {
'& .MuiButton-root': {
textTransform: 'none',
},
},
<Box className={classes.parentOfButton}>
<Button>Text</Button>
</Box>
UPDATE
I have tried doing the same thing in createTheme, and it worked, here is the way I did it:
components: {
MuiButton: {
styleOverrides: {
root: {
textTransform: 'none',
},
},
},
},